<template>
	<div class="order">
		<div class="orderBox">
			<div class="orderSonBox1">
				<p style="font-size: 15px;color: #818181;">
					<i class="el-icon-notebook-2"></i>
					<span>我的订单详情</span>
				</p>
			</div>
			<div class="orderSonBox2">
				<el-form style="display: flex;">
					<el-form-item>
					    <el-select v-model="payment" placeholder="付款" style="width: 120px;">
							<el-option label="未付款" value="0"></el-option>
							<el-option label="已付款" value="1"></el-option>
					    </el-select>
					</el-form-item>
					<el-form-item>
					    <el-select v-model="shipments" placeholder="发货" style="width: 120px;margin-left: 5px;">
					    	<el-option label="未发货" value="0"></el-option>
					    	<el-option label="已发货" value="1"></el-option>
					    </el-select>
					</el-form-item>
					<el-form-item>
					    <el-select v-model="time" placeholder="时间" style="width: 120px;margin-left: 5px;">
							<el-option label="7天内" value="7"></el-option>
							<el-option label="15天内" value="15"></el-option>
							<el-option label="30天内" value="30"></el-option>
							<el-option label="60天内" value="60"></el-option>
							<el-option label="120天内" value="120"></el-option>
					    </el-select>
					</el-form-item>
					 <el-form-item>
					    <el-button @click="queryInquire()" type="primary" icon="el-icon-search" style="margin-left: 5px;">查询</el-button>
					  </el-form-item>
				</el-form>
			</div>
		</div>
		<div>
			<el-table :data="tableData" border style="width: 100%;">
				<el-table-column type="expand">
				      <template slot-scope="scope">
							  <el-form style="display: flex;margin-left: 10%;" v-for="item in scope.row.items">
							    <el-form-item style="width: 100px;">
									<el-image
							            style="width:  40px;height: 50px;"
							            :src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`">
									</el-image>
							    </el-form-item>
								<el-form-item style="width: 320px;">
									<b>名称:</b>{{item.book.name}}
								</el-form-item>
								<el-form-item style="width: 100px;">
									<b>数量:</b>{{item.num}}
								</el-form-item>
								<el-form-item style="width: 100px;">
									<b>单价:</b>{{item.price}}
								</el-form-item>
				        </el-form>
				      </template>
				</el-table-column>
				<el-table-column prop="ordid" label="订单号">
				</el-table-column>
				<el-table-column prop="ship2name" label="收货人">
				</el-table-column>
				<el-table-column prop="ship2addr" label="收货地址">
				</el-table-column>
				<el-table-column prop="ship2phone" label="电话">
				</el-table-column>
				<el-table-column prop="shipno" label="发货单号">
				</el-table-column>
				<el-table-column prop="tcreate" label="下单时间">
					<template slot-scope="scope">
						{{scope.row.tcreate|run}}
					</template>	
				</el-table-column>
				<el-table-column prop="amount" label="总价">
				</el-table-column>
				<el-table-column label="付款">
					<template slot-scope="scope">
						<el-button @click="goPayment(scope.row.ordid)" v-show="scope.row.payStatus==0" style="color: #8a2be2;font-weight: 700;">未付</el-button>
						<el-button v-show="scope.row.payStatus==1" style="color: rebeccapurple;font-weight: 700;">已付</el-button>
					</template>
				</el-table-column>
				<el-table-column label="收货">
					<template slot-scope="scope">
						<span v-show="scope.row.shipStatus==0" style="color: orangered;font-weight: 700;">未发</span>
						<span v-show="scope.row.shipStatus==1" style="color: rebeccapurple;font-weight: 700;">待收</span>
					</template>
				</el-table-column>
			</el-table>
			<div style="width: 100%;text-align: center;">
				<el-button v-on:click="showMore()" type="primary" style="width: 300px;">显示更多</el-button>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		name: 'UserOrder',
		data(){
			return{
				tableData:[],
				form:[],
				payment:'请选择',
				shipments:'请选择',
				time:'请选择',
			}
		},
		filters:{
			run(value){
				let one = new Date(value);
				let year =one.getFullYear()+"-"+(one.getMonth()+1)+"-"+one.getDate();
				return year;
			}
		},
		methods:{
			findMyOrder(){
				this.$postk("/api/fore/ord/findPageOrders/1/5").then(
				(resp)=>{
					console.log(resp.data);
					this.tableData=resp.data.data.orders;
				})
			},
			goPayment(orderid){
				console.log(orderid);
				console.log(11111111111);
				this.$router.push({
					path:'/pc/payment?odid='+orderid
				})
			},
			queryInquire(){
				this.tableData=[];
				console.log(this.time);
				console.log(this.payment);
				console.log(this.shipments);
				let fd=new FormData();
				fd.append("payStaus",this.payment);
				fd.append("shipStatus",this.shipments);
				fd.append("days",this.time);
				this.$postf("/api/fore/ord/findPageOrders/1/10",fd)
				.then((resp)=>{
					console.log(resp.data.data.orders);
					this.tableData=resp.data.data.orders;
				})
			}
			
		},
		mounted(){
			this.findMyOrder();
		}
	}
</script>

<style scoped>
	.order{
		width: 85%;
		margin: 50px auto;
	}
	.orderBox{
		display: flex;
		text-align: center;
		border-bottom: 1px solid #90d9ff;
		margin: 0px auto;
	}
	.orderSonBox1{
		width: 60%;
		margin: 20px auto;
	}
	.orderSonBox2{
		margin-top: 30px;
	}
</style>